<script lang="ts" setup>
import { dictionartTypeList } from './dictionaryType';
import type { DictionaryType } from '@/types';
import type { ElTree } from 'element-plus';

const currentDictionaryType = defineModel<DictionaryType>('currentDictionaryType', {
  type: Object,
  required: true
});

const treeRef = ref<InstanceType<typeof ElTree>>();

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.typeText.includes(value);
};

const searchKeyword = ref<string>();

watch(searchKeyword, val => {
  treeRef.value!.filter(val);
});

const defaultExpandedKeys = computed<string[]>(() =>
  Array.of(currentDictionaryType.value.typeText)
);

const handleCurrentChange = (data: DictionaryType, _node: Node) => {
  currentDictionaryType.value.tenant = data.tenant;
  currentDictionaryType.value.typeText = data.typeText;
  currentDictionaryType.value.typeCode = data.typeCode;
  currentDictionaryType.value.state = data.state;
};
</script>
<template>
  <el-input v-model="searchKeyword" placeholder="请输入菜单关键字" class="searh-input" clearable />

  <el-tree
    ref="treeRef"
    :data="dictionartTypeList"
    :filter-node-method="filterNode"
    :default-expanded-keys="defaultExpandedKeys"
    node-key="typeText"
    highlight-current
    :current-node-key="currentDictionaryType.typeText"
    @current-change="handleCurrentChange"
  >
    <template #default="{ data }"> {{ data.typeText }}</template>
  </el-tree>
</template>
<style lang="scss" scoped>
.searh-input {
  margin-bottom: 5px;
}
</style>
